<script setup>
	import { ref } from 'vue'
	import datasetConfig from '@/views/plugin/dashboard/view/data/components/dataset/config.vue'
	import datasetForm from '@/views/plugin/dashboard/view/data/components/dataset/form.vue'
	import indicatorForm from '@/views/plugin/dashboard/view/data/components/dataset/indicatorForm.vue'
	import datasetApi from '@/views/plugin/dashboard/api/datasetApi'
	const columns = [
		{
			title: '数据集名称',
			dataIndex: 'name'
		},
		{
			title: '所属连接器',
			dataIndex: 'dataConnectorName'
		},
		{
			title: '描述',
			dataIndex: 'description'
		}
	]
	if (hasPerm(['bizOrgEdit', 'bizOrgDelete'])) {
		columns.push({
			title: '操作',
			dataIndex: 'action',
			align: 'center',
			width: '200px'
		})
	}
	const props = defineProps({
		loadData: {
			type: Function,
			required: true
		},
		options: {
			type: Object,
			required: true
		},
		toolConfig: {
			type: Object,
			required: true
		},
		parentId: {
			type: String,
			default: ''
		}
	})

	const emit = defineEmits(['update:selectedRowKeys', 'delete', 'batchDelete', 'edit', 'config'])

	const tableRef = ref(null)
	const formRef = ref()
	const configRef = ref()
	const indicatorFormRef = ref()

	// 删除
	const removeDataset = (record) => {
		emit('delete', record)
	}

	// 批量删除
	const deleteBatchOrg = (params) => {
		emit('batchDelete', params)
	}

	// 对外暴露方法
	defineExpose({
		refresh: () => tableRef.value.refresh(true),
		clearRefreshSelected: () => tableRef.value.clearRefreshSelected()
	})

	// 展开行内容
	const expandedRowRender = (record) => {
		if (!record?.config?.indicators?.length) {
			return '暂无指标数据'
		}
	}

	// 删除指标
	const deleteIndicator = async (record, id) => {
		const updatedRecord = { ...record }
		updatedRecord.config.indicators = updatedRecord.config.indicators.filter((item) => item.id !== id)
		await datasetApi.save(updatedRecord)
		tableRef.value.refresh()
	}
</script>

<template>
	<div>
		<s-table
			ref="tableRef"
			:columns="columns"
			:data="loadData"
			:expand-row-by-click="true"
			:alert="options.alert.show"
			bordered
			:row-key="(record) => record.id"
			:tool-config="toolConfig"
			:row-selection="options.rowSelection"
		>
			<template #operator class="table-operator">
				<a-space>
					<a-button type="primary" @click="formRef.onOpen(undefined, parentId)" v-if="hasPerm('bizOrgAdd')">
						<template #icon><plus-outlined /></template>
						新增
					</a-button>
					<xn-batch-button
						v-if="hasPerm('bizOrgBatchDelete')"
						buttonName="批量删除"
						icon="DeleteOutlined"
						buttonDanger
						:selectedRowKeys="options.rowSelection.selectedRowKeys"
						@batchCallBack="deleteBatchOrg"
					/>
				</a-space>
			</template>
			<template #bodyCell="{ column, record }">
				<template v-if="column.dataIndex === 'action'">
					<a @click="formRef.onOpen(record)" v-if="hasPerm('bizDatasetEdit')">编辑</a>
					<a-divider type="vertical" v-if="hasPerm(['bizDatasetEdit', 'bizDatasetDelete'], 'and')" />
					<a @click="indicatorFormRef.onOpen(record)" v-if="hasPerm('bizDatasetEdit')">添加指标</a>
					<a-divider type="vertical" v-if="hasPerm(['bizDatasetEdit', 'bizDatasetDelete'], 'and')" />
					<a-popconfirm title="确定删除数据集吗？" @confirm="removeDataset(record)">
						<a-button type="link" danger size="small" v-if="hasPerm('bizDatasetDelete')">删除</a-button>
					</a-popconfirm>
				</template>
			</template>
			<template #expandedRowRender="{ record }">
				<template v-if="!record?.config?.indicators?.length"> 暂无指标数据 </template>
				<template v-else>
					<a-table
						:columns="[
							{ title: '指标名称', dataIndex: 'name' },
							{ title: '指标类型', dataIndex: 'type' },
							{ title: '操作', dataIndex: 'action', align: 'center', width: '200px' }
						]"
						bordered
						:data-source="record.config.indicators"
						:pagination="false"
						size="small"
						:row-key="(record) => record.id"
					>
						<template #bodyCell="{ column, record: innerRecord }">
							<template v-if="column.dataIndex === 'type'">
								{{ innerRecord.type === 'query' ? '可视化配置' : '自定义配置' }}
							</template>
							<template v-if="column.dataIndex === 'action'">
								<a-space>
									<a @click="indicatorFormRef.onOpen(record, innerRecord)">编辑</a>
									<a @click="configRef.onOpen(innerRecord)">配置</a>
									<a-popconfirm title="确定删除指标吗？" @confirm="() => deleteIndicator(record, innerRecord.id)">
										<a-button type="link" danger size="small">删除</a-button>
									</a-popconfirm>
								</a-space>
							</template>
						</template>
					</a-table>
				</template>
			</template>
		</s-table>
		<dataset-form ref="formRef" @loadData="() => tableRef.refresh()" />
		<dataset-config ref="configRef" @loadData="() => tableRef.refresh()" />
		<indicator-form ref="indicatorFormRef" @loadData="() => tableRef.refresh()" />
	</div>
</template>
